<template>
  <div class="service-container">
    <img class="bgimg" src="../assets/img/banner4.jpg"/>
    <div class="headh"> 
      <img class="left-icon" src="../assets/img/rectangle.png"/>
      <div class="content">
        <h2 class="font-white fs30">华丽升级</h2>
        <h1 class="font-white fs40">物超所值</h1>
        <div>
          <h3 class="font-blue fs20">2017</h3>
          <h3 class="font-blue fs16">健身会所智能化解决方案</h3>
        </div>
      </div>
      <img src="../assets/img/radiu_cross_arrow.png" class="right-icon"/>
    </div>
    <div class="container">
     <div class="step-container" style="margin-bottom: 100px;">
       <!--------------------------------------0--------------------------------------------->
      <div class="step0">
        <div class="blue-bg tip-text text-left">
          <p>让中未智联</p>
          <p>实现您的</p>
          <p class="down-line">智能化改造</p>
        </div>
        <div class="step0-content">
          <div class="step0-bg">
            <img class="border-h" src="../assets/img/00.png"/>
            <h3 class="colr-text">健 身 会 所  智 能 化 解 决 方 案</h3>
            <p class="text-left">提升健身会所管理效率，让健身会所省钱、省心、更时尚</p>
            <p class="text-left">智能门禁闸机+会员手环+智能更衣锁+查询机</p>
            <img src="../assets/img/down.png"/>
            <div class="tip-ball font-white text-center trans-all">Fitness club intelligent solutions</div>
          </div>
        </div>
        <img height="100%" src="../assets/img/pic1.jpg"/>
      </div>
      <!--------------------------------------1--------------------------------------------->
      <div class="step1">
        <img class="step1-a4" src="../assets/img/51.png"/>
      	<div class="step-title-style1">
      		<div class="num-h">
      			<img src="../assets/img/01.png"/>
      			<h1 class="colr-text">01</h1>
      		</div>
      		<div class="step-title text-left">
            <h2>智能门禁闸机</h2>
            <h3>INTELLIGENT GATEWAY ACCESS CONTROL</h3>
          <img class="plus" src="../assets/img/plus.png" alt="" />
      		</div>
      	</div>
      	<div class="step1-content">
      		<div class="left-content text-left">
      			<p class="step1-a1">全国范围内，首次将指纹验证置于闸机内部用于验证健身会员身份，更美观，体验更好</p>
      			<p class="step1-a2">
      			  1、对传统闸机进行智能化升级改造<br />
              2、内置指纹验证确保会员本人入场，更方便、美观<br />
              3、与CRM系统通信，实时掌握进出场记录
      			</p>
      			<div class="s-bloack">
      				<i class="i1">创新</i>
      				<i class="i2">智能</i>
      				<i class="i3">个性</i>
      				<i class="i4">时尚</i>
      			</div>
      		</div>
      		<div class="right-content step1-a3">
            <img src="../assets/img/Brake-machine.png"/>
          </div>
      	</div>
      </div>
     </div>
     
      <img class="pos-a" width="100%" src="../assets/img/02banner.png"/>
      <img class="out-img step3-a7" src="../assets/img/outpic.png"/>
      <!--------------------------------------2--------------------------------------------->
      <div style="margin: -35px auto 360px;" class="step-container">
        <div class="step2">
          <div class="num-h2 text-right light-ani">
            <img src="../assets/img/bigplus.png"/>
          	<h1>02</h1>
          	<p class="step2-str1">会员手环</p>
          	<p class="step2-str2">MEMBER BRACELET</p>
          	<div class="down-line"></div>
          </div>
          <div class="step2-content text-left">
          	<div class="content-box step2-a1">
          		<span >1、</span><p>会员独享手环，告别前台验身份，减轻前台压力</p>
          	</div>
          	<div class="content-box step2-a2">
              <span >2、</span><p>款式多样，颜色多样，可定制logo</p>
            </div>
            <div class="content-box step2-a3">
              <span>3、</span><p>成本低、防水、耐用</p>
            </div>
            <img class="step2-a4" src="../assets/img/Bracelet.png"/>
          </div>
        </div>
        <!--------------------------------------3--------------------------------------------->
        <div class="step3">
          <div class="step-title-style1">
            <div class="num-h">
              <img src="../assets/img/01.png"/>
              <h1 class="colr-text">03</h1>
            </div>
            <div class="step-title text-left">
              <h2>智能更衣柜锁</h2>
              <h3>INTELLIGENT CHANGING LOCK</h3>
            <img class="plus" src="../assets/img/plus.png" alt="" />
            </div>
          </div>
          <div class="step3-content-border step3-a6">
          	<div class="step3-content-bg">
          		<div class="step3-content text-left">
          			<p class="step3-a1">1、电池供电，安装方便，正常情况，超长待机时间6个月</p>
          			<p class="step3-a2">2、共享式存储，会员可存任意空闲柜</p>
          			<p class="step3-a3">3、与门禁闸机通信，会员离场有物品未取，自动提醒会员，减轻店内人员清场压力</p>
          			<p class="step3-a4">4、可设置VIP专享柜，由会员独享，增加店内收入。</p>
          		</div>
          		<img class="step3-img-right step3-a4" src="../assets/img/lock.png"/>
          		<img class="step3-img-left step3-a5" src="../assets/img/locktwo.png"/>
          	</div>
          </div>
        </div>
        <!--------------------------------------4--------------------------------------------->
        <div class="step4">
          <div class="num-h3 light-ani">
          	<img src="../assets/img/bigplus.png"/>
            <h1>04</h1>
            <p class="step4-str1">查询机</p>
            <p class="step4-str2">INQUIRY MACHINE</p>
            <div class="down-line"></div>
          </div>
          <div class="step4-content">
          	<img class="left-content step4-a1" src="../assets/img/52.png"/>
          	<div class="right-content">
          		<p class="step4-a2">1、会员忘记所存柜子号码，可自助查询</p>
          		<p class="step4-a3">2、外观小巧，安装方便，通电即可使用</p>
              <div class="up-line step4-a5"></div>
              <img class="step4-a4" src="../assets/img/04query.png"/>
          	</div>
          </div>
        </div>
        <div class="step5">
          <div class="step-title-style1">
            <div class="num-h">
              <img src="../assets/img/01.png"/>
              <h1 class="colr-text">05</h1>
            </div>
            <div class="step-title text-left">
              <h2>健身管理步骤</h2>
              <h3>FITNESS MANAGEMENT STEPS</h3>
            <img class="plus" src="../assets/img/plus.png" alt="" />
            </div>
          </div>
          <ul class="step5-content">
          		<li>
          		  <p class="stepblue">第一步</p>
          		  <p class="setptext">前台录取指纹 <br />绑定手环 </p>
          		  <img src="../assets/img/sf1-1.jpg"/>
          		  <img src="../assets/img/sf1.png"/></li>
          		<li>
                <p class="stepblue">第二步</p>
                <p class="setptext">会员验指纹 <br />确保本人入场 </p>
                <img src="../assets/img/sf1-24.jpg"/>
                <img src="../assets/img/sf2.png"/></li>
                <li>
                <p class="stepblue">第三步</p>
                <p class="setptext">手环存物于 <br />任意空闲柜 </p>
                <img src="../assets/img/sf1-3.jpg"/>
                <img src="../assets/img/sf3.png"/></li>
                <li>
                <p class="stepblue">第四步</p>
                <p class="setptext">忘取物就离开 <br />闸机语音提示 </p>
                <img src="../assets/img/sf1-24.jpg"/>
                <img src="../assets/img/sf4.png"/></li>
                <li>
                <p class="stepblue">第五步</p>
                <p class="setptext">手环无需还 <br />会员所属物 </p>
                <img src="../assets/img/sf1-5.jpg"/>
                <img src="../assets/img/sf5.png"/></li>
          </ul>
        </div>
      </div>
      <div class="bottom">
        <img class="bgimg" src="../assets/img/banner5.jpg"/>
        <div class="bottom-content">
          <p class="text-left"><img src="../assets/img/location.png"/>重庆市观音桥红鼎国际C座30-08</p>
          <p class="text-center"><img src="../assets/img/tel.png"/>023-88255663 转分机号888（业务咨询）</p>
          <p class="text-right"><img src="../assets/img/mail.png"/>business@ocmcom.com</p>
          <img class="bottom-logo" src="../assets/img/logo.png"/>
        </div>
        <div class="totop" @click="totop">
          <i></i>
          TOP
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'product',
  data () {
    return {
      info:''
    }
  },components:{
  },methods:{
    totop(){
      var timer = setInterval(function(){ 
        if($(document).scrollTop()>0)
          moveup();
        else clearInterval(timer);
      },1)
    }
  },mounted(){
    $("#info-container").html(this.info);
    var totop = $(".totop");
    var anistep1,anistep2,anistep3,anistep4; 
    anistep1= anistep2= anistep3= anistep4= false;
    $(document).on("scroll",function(){
      var t  =$(this);
      var scrolltop = t.scrollTop();
      if(scrolltop>2100){
        totop.css({"position":"absolute","top":"-40px"});
      }else if(scrolltop<300){
        totop.css({"opacity":"0"});
      }else{
        totop.css({"position":"fixed","top":""});
      }
      if(scrolltop>300&&totop.css("opacity")!=1){
        totop.css({"opacity":"1"});
      }
      if(scrolltop>2100&&!anistep4){
        //step4
        anistep4=true;
        $(".step4-a1").addClass("shake-ani");
        for(var i4=2;i4<5;i4++)$(".step4-a"+i4).css({"opacity":"1"})
        $(".step4-a5").css({"width":"100px"})
      }else if(scrolltop>1600&&!anistep3){
        //step3
        anistep3=true;
        for(var i3=1;i3<6;i3++) $(".step3-a"+i3).css({"opacity":"1"});
        $(".step3-a6").css({"width":"720px","height":"406px"});
        $(".step3-a7").css({"width":"100%"});
      }
      else if(scrolltop>800&&!anistep2){
        //step2
        anistep2=true;
        for(var i2=1;i2<4;i2++) $(".step2-a"+i2).css({"opacity":"1","margin-right":"60px"});
        $(".step2-a4").css({"opacity":"1","margin-left":"60px"});
      }else if(scrolltop>300&&!anistep1){
        //step1
        anistep1 = true;
        setTimeout(function(){$(".step1-a1").css({"opacity":"1"});},100)
        setTimeout(function(){$(".step1-a2").css({"opacity":"1"});},300);
        setTimeout(function(){$(".step1-a3").css({"opacity":"1","margin-left":"0"});},500)
        setTimeout(function(){$(".step1-a4").css({"opacity":"1","margin-left":"0"});},500)
        $(".s-bloack").children().each(function(){
          var c = $(this);
          c.css({"opacity":"1"});
        })
      }
      
    });
  }
}
function moveup(){
  var osTop = document.documentElement.scrollTop || document.body.scrollTop;
  var ispeed = Math.floor(-osTop / 50);
  document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p{margin: 0;}
h1,h2,h3{margin: 0;font-weight: 400;text-align: center;}
@media screen and (min-width: 980px) {	.headh{	  top: 20%;	}}
@media screen and (max-width: 981px) {	.headh{  top: 12%;}}
.headh{  -webkit-user-select: none;  -moz-user-select: none;  left: 45%;  position: absolute;}
.headh .left-icon{width: 120px;position: absolute;left: -80px;bottom: 2px;}
.headh .right-icon{  top: -20px;  right: -90px;  position: absolute;  width: 120px;}
.headh .content{  text-align: left;}
.font-white{color: white;}
.font-blue{  color: #2C92B5;}
.headh h1,.headh h2,.headh h3{  letter-spacing: 3px;text-align: left;}
.bottom .bottom-logo{  height: 60px;margin:90px auto 0;display: block;}
.fs40{font-size: 40px;}
.fs30{font-size: 30px;}
.fs20{font-size: 20px;}
.fs16{font-size: 16px;}
.service-container{  position: relative;  width: 100%;  height: 100%;-moz-user-select: none;-webkit-user-select: none;cursor: default;}
.container{  padding-bottom: 1px;  position: relative;  background: white;  min-height: 800px;}
.bottom{  width: 100%;  position: absolute;bottom: 0;-webkit-user-select: text;}
.bottom-content{width: 72%;margin: auto; padding: 60px 0 0 0;position: relative;z-index: 2;}
.bottom-content img{vertical-align: middle;height: 20px;margin-right: 4px;}
.bottom-content p{  color: white;font-size: 14px;  display: inline-block;float: left;  width: 33%;}
.bottom-content{}
.bottom .bgimg{position: absolute;}
.bgimg{  display: block;  width: 100%;}
.step-container{  width: 900px;  margin:100px auto 0;}
.step-container:last-of-type{margin:0 auto 160px;}
.step0{width: 100%;  text-align: right;   height: 240px;}
.step0-content{position:absolute;left:80px;right:325px;height:100%;background: black;display: block;}
.step0-bg{ background: url('../assets/img/pic2.jpg') no-repeat;height: 252px;background-size: cover;position: relative;top: -40px;width:461px;left: 34px;}
.step0-bg .border-h{position: absolute;left: 80px;width: 310px;top: 24px;}
.step0-bg h3{padding-top:40px;}
.step0-bg p:first-of-type{width: 80%;margin:40px auto 0;} 
.step0-bg p:last-of-type{width: 80%;margin:20px auto 0;color: #36bef0;}
.step0-bg img:last-of-type{margin: 10px 10% 0 0;width: 20px;}
.tip-ball:hover{animation: light .5s;}
.tip-ball{position: absolute;background-color: #36BEF0;line-height: 40px;height:40px;width: 326px;top: 0;right: -326px;font-size: 14px;}
.tip-ball::before{content: '';background-color:#36BEF0;width: 15px;height: 15px;display: block;transform: rotate(45deg);margin: 13px 0 0 -8px ;position: absolute;}.tip-text{width: 80px;height: 80px; position: absolute;z-index:1;left:0;top:20px;padding: 17px; color: white; font-size: 13px;}
.tip-text p:last-of-type{margin-top: 10px;font-size: 16px;}
.tip-text p{margin:0;}
.down-line::after{content:'';border-bottom:solid 3px white;display: block;width: 30px;margin: 10px 0 0 2px ;}
.trans-all{transition: all .5s;}
.step1{margin: 80px auto 0;}
.step1 >img{width: 220px;position: absolute;left: -165px;}
.num-h h1{font-size: 65px;color: #333;font-family: sans-serif;}
.num-h img{width: 75px;position: absolute;margin: -20px 0 0 -78px}
.step0,.step1,.step-title-style1,.num-h,.right-content,.step2{position: relative;}
.step-title-style1{width: 400px;margin: auto;}
.step-title-style1 >div{display: inline-block;}
.step-title-style1 h2{font-size: 20px;text-align: left;color: #333;margin: 5px 0;}
.step-title-style1 h3{font-size: 12px;padding-bottom: 3px;}
.step-title-style1 .plus{width: 85px;margin:-100px 0 0 135px;position: absolute;}
.step-title{display: inline-block;}
.step1-content .left-content,.step1-content .right-content{width:290px;display: inline-block;float: left;}
.step1-content .left-content{margin:30px 40px 0 80px;}
.left-content p:first-child{font-size: 14px;margin-top: 0;}
.left-content p:last-of-type{font-size: 12px;}
.right-content img{width: 140%;}
.step1-content{overflow: hidden;margin: 30px 0 0 0;}
.s-bloack{margin-top: 40px;height: 50px;}
.s-bloack i{font-style: normal;font-size: 14px;color: white;padding:8px 4px;margin-right: 25px;opacity: 0;}
.step1-a2{margin: 20px 0 0 0;}
.step1-a1,.step1-a2{transition: all .5s;opacity: 0;}
.step1-a3{transition: all 1s;opacity: 0;margin-left: 100px;}
.step1-a4{transition: all 1s;opacity: 0;margin-left: -100px;}
.step2-a1{transition: all .5s .5s;opacity: 0;}
.step2-a2{transition: all .5s .6s;opacity: 0;}
.step2-a3{transition: all .5s .7s;opacity: 0;}
.step2-a4{transition: all .5s .8s;opacity: 0;}
.step3-a1{transition: all .5s .5s;opacity: 0;}
.step3-a2{transition: all .5s .7s;opacity: 0;}
.step3-a3{transition: all .5s .9s;opacity: 0;}
.step3-a4{transition: all .5s 1.1s;opacity: 0;}
.step3-a5{transition: all .5s 1.2s;opacity: 0;}
.step3-a6{transition: all .5s .2s;width: 0;height: 0;}
.step3-a7{transition: all .5s .2s;width: 0;}
.step4-a2{transition: all .5s .5s;opacity: 0;}
.step4-a3{transition: all .5s .6s;opacity: 0;}
.step4-a4{transition: all .5s .7s;opacity: 0;}
.step4-a5{transition: all .5s .7s;width: 0;}
.i1{background: #1D2089;transition: all .5s .5s;}
.i2{background: #36BEF0;transition: all .5s .6s;}
.i3{background: #95C41C;transition: all .5s .7s;}
.i4{background: #E63885;transition: all .5s .8s;}
.pos-a{position: absolute;width: 100%;left: 0;}
.num-h2{width: 150px;background: url('../assets/img/02bg.png') no-repeat; background-size: cover;height: 200px;}
.num-h2 h1{color: white;font-size: 65px;font-family: sans-serif;text-align: left;margin-left: 10px;}
.num-h2 p{text-align: left;color: white;font-size: 20px;margin-left: 10px;}
.step2 .step2-str1{letter-spacing: 3px;}
.step2 .step2-str2{font-size: 9.5px;margin: 3px 0 0 10px;}
.step2 .down-line{margin-left: 8px;}
.num-h2 img{width: 70px;margin: 10px 30px 0 0;}
.step2{padding-left: 80px;}
.step2-content{width: 500px;margin-top: 40px;}
.content-box{vertical-align: top; display: inline-block; background: rgba(255,255,255,.8);width: 100px;height:100px;margin-right: -60px;text-align: left;padding: 5px 5px 5px 10px;box-sizing: border-box;}
.content-box span{float: left;color: #36BEF0;}
.content-box p{font-size: 12px;line-height: 18px;letter-spacing: 2px;padding-top: 5px;}
.content-box:last-of-type{margin-right: 0;}
.step2-content img{position: absolute;margin:70px 0 0 60px; width: 260px;}
.step3{margin: 280px 0 100px 0; height: 500px;}
.step3-content-border {margin-top:20px;/*height: 406px;width:720px;*/position: relative;left: 80px;background: url('../assets/img/03rectangle.png') no-repeat;background-size: cover;}
.step3-content-bg{background: #F3F3F3;height: 370px;width:684px;position: relative;left: 18px;top: 18px;}
.step3-content{font-size: 14px;margin-left:70px;padding-top: 50px;width: 380px;float: left;}
.step3-img-right{float: left;width: 120px;margin: 50px 0 0 50px;}
.step3-img-left{float: left;margin:-170px 0 0 70px;width: 350px;}
.out-img{  position: absolute;top: 1300px;width:0;left: 0;}
.num-h3 {float:left;background: #35BBEC;width: 260px;padding:30px 0 20px 20px;box-sizing: border-box;position: relative;;}
.num-h3::after{content: '';display: block;width: 65px;height: 100%;position: absolute;top:0;background:rgba(53,187,236,.3) ;right: -65px;z-index: 1;}
.num-h3 h1{font-size: 65px;font-family: sans-serif;}
.step4{position: relative;margin: 50px 0;height: 300px;}
.step4-str1{letter-spacing: 3px;font-size: 20px;}
.step4-str2{font-size: 9.5px;margin: 3px 0;}
.num-h3 *{color: white;text-align: left;}
.num-h3 img{width: 80px;float: right;margin-right: 50px;}
.step4-content{text-align: left; background: #F0F0F0;display: inline-block;position: absolute;right: 100px;left: 260px;top: -30px;}
.step4-content .left-content{width: 260px;margin: 100px 0 0 -40px;}
.step4-content .right-content{text-align: left;float: right;margin: -280px 50px 0 200px;font-size: 14px;}
.step4-content .right-content img{width: 120px;margin: 80px 0 0 80px;}
.step5{margin: 100px 0 0 0;}
.step5-content{overflow: hidden;padding-top: 50px;}
.step5-content li{display: inline-block;float: left;width: 20%;text-align: center;padding: 0 3%;box-sizing: border-box;}
.step5-content img{width: 100%;}
.setptext{letter-spacing: 3px; text-align: center;margin: auto;}
.stepblue{font-size: 14px; width: 80%; background: #009FE7;border-radius: 5px;line-height:24px;color: white;margin:0 auto 10px;}
.up-line::before{content:'';border-bottom:solid 3px #333;display: block;width: 0;margin: -55px 0 0 146px;}
.totop{cursor: pointer; z-index:1;transition:all .5s; opacity: 0; position: fixed;width: 40px;height: 40px;background: #35BBEC;right: 150px; bottom: 100px;font-size: 12px;color:white;}
.totop i{display: block;border-left: solid 2px white;border-top: solid 2px white;transform: rotate(45deg); height: 6px;width: 6px;margin:8px auto 3px;}
.light-ani:hover{animation: light .5s;}
.shake-ani{animation:  shake .7s;transform-origin:bottom;}
@keyframes light{
	0{opacity: 0;}
	20%{opacity: .4;}
	40%{opacity: .1;}
	60%{opacity: .8;}
	80%{opacity: .3;}
	100%{opacity: 1;}
}
@keyframes shake{
	0{transform: rotate(-15deg);}
	16%{transform: rotate(15deg);}
	32%{transform: rotate(-10deg);}
	48%{transform: rotate(10deg);}
	68%{transform: rotate(-5deg);}
	80%{transform: rotate(-5deg);}
	100%{transform: rotate(0deg);}
}
</style>
<style type="text/css">
.f-l{float: left;}
.f-r{float: right;}
.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.blue-bg{background: #36BEF0;}
.colr-text{color:#333 ;}
</style>
